.bruce {
	filter: contrast(10);
}
.sticky-ball {
	position: relative;
	width: 320px;
	height: 80px;
	filter: contrast(10);
}
div[class*=ball-] {
	position: absolute;
	top: 0;
	padding: 10px;
	border-radius: 100%;
	width: 80px;
	height: 80px;
	background-color: red;
	filter: blur(5px);
	animation: 6s infinite;
}
.ball-1 {
	left: 0;
	animation-name: move-1 !important;
}
.ball-2 {
	left: 240px;
	animation-name: move-2 !important;
}
@keyframes move-1 {
	0%,
	20%,
	100% {
		width: 80px;
		height: 80px;
	}
	50% {
		left: 110px;
		top: -15px;
		width: 110px;
		height: 110px;
	}
	85% {
		left: 75px;
		width: 90px;
		height: 70px;
	}
	90% {
		top: -2px;
		width: 75px;
		height: 85px;
	}
}
@keyframes move-2 {
	0%,
	20%,
	100% {
		width: 80px;
		height: 80px;
	}
	50% {
		left: 110px;
		top: -15px;
		width: 110px;
		height: 110px;
	}
	85% {
		left: 165px;
		width: 90px;
		height: 70px;
	}
	90% {
		top: -2px;
		width: 75px;
		height: 85px;
	}
}

.sticky-container {
	background: #000;
	overflow: hidden;
	
	.blurfield {
	  height: 200px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: #000;
	  filter: blur(10px) contrast(30);
	}
  
	.ball1,
	.ball2 {
	  width: 80px;
	  height: 80px;
	  background-color: #fff;
	  position: absolute;
	  animation: ball 10s infinite;
	  border-radius: 100%;
	}
  
	.ball2 {
	  animation-delay: -2s;
	}
  }
  
  @keyframes ball {
	0% {
	  transform: translateX(-100px);
	}
  
	50% {
	  transform: translateX(100px);
	}
	100% {
	  transform: translateX(-100px);
	}
  }